<template>
  <el-main class="swagger marginL20">
    <el-form :inline="true" size="small" ref="search">
      <el-form-item :label="$t('appconfig')">
        <el-select :placeholder="$t('placeholder_select')" v-model="customAppsId">
          <el-option
            v-for="item in customApps.datas"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('domain')">
        <el-select :placeholder="$t('placeholder_select')" v-model="domainsId">
          <el-option
            v-for="item in domains.datas"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('front_user')">
        <el-input type="text" :disabled="true" :value="selectedUser"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button plain icon="el-icon-user-solid" @click="onProxyUserBtnClick">{{$t('choose')}}</el-button>
        <el-button plain icon="el-icon-user-solid" @click="onLoginBtnClick">{{$t('signin')}}</el-button>
        <el-button plain icon="el-icon-user-solid" @click="onLogoutBtnClick">{{$t('loginout')}}</el-button>
        <el-button @click="onExit" size="small" type="primary" plain>{{$t('exit')}}</el-button>
        <span v-show="this.loginSuccess">{{this.loginSuccessMsg}}</span>
      </el-form-item>
    </el-form> 
    <user_selectbox :detail="content" :visible.sync="userSelectVisible" @select-ok="onSelectUserOk" v-if="userSelectVisible"  type="swagger"/>
    <iframe :src="url" frameborder="0" class="swagger-word" ref="maincon" style="overflow-y:scroll"></iframe>
  </el-main>
</template>

<script>
import user_selectbox from "@/components/user_selectbox.vue";

export default {
  components: {
    user_selectbox
  },
  props:[
    // "height",
    // "currentService"
  ],
  data(){
    return {
      searchdata:{
        currpage:1,
        pagelines:100000,
        data:{
          name:"",
          username:''
        }
      },
      customApps: [],
      domains: [],
      customAppsId:"",
      domainsId:"",
      userSelectVisible: false,
      content: {},
      selectedUser:"",
      selectedUserId:"",
      loginSuccess: false,
      loginSuccessMsg: "",
      url:"",
      currentService:{},
    };
  },
  mounted(){
    // let h=(document.documentElement.clientHeight || document.body.clientHeight) - 60 - 10 - 27 - 40 - 44 - 20;
    let h=(document.documentElement.clientHeight || document.body.clientHeight) - 51 - 20;
    this.$refs.maincon.style.height=h+"px";
  },
  computed:{
  },
  created() {
    let queryData = this.$route.query
    this.currentService = JSON.parse(queryData.currentService)
    let currentService = this.currentService
    this.url=this.$api.getSwaggerUrl(`/monitor/${currentService.host}${currentService.contextPath}/${currentService.port}/swagger-ui.html`)
    this.$api.momitorGetCustomApps(
      currentService,
      {
        onSucess: resp => {
          this.customApps = resp.data.data;
          this.customAppsId=this.customApps.datas[0].id;
        }
      }
    );
    this.$api.monitorGetDomains(this.searchdata, currentService,{
      onSucess: response => {
        this.domains = response.data.data;
        this.domainsId=this.domains[0].id;
      }
    }); 
  },
  methods: {
    onSelectUserOk(users) {
      this.selectedUser = users[0].name;
      this.selectedUserId = users[0].id;
    },
    onProxyUserBtnClick() {
      this.content.customAppsId = this.customAppsId;
      if(this.domainsId.length<=0){
        this.$message({
          message: this.$t('msg_select_domain'),
          type: 'error'
        });
        return false;
      }
      this.content.domainsId = this.domainsId;
      this.content.tabVisible = true;
      this.userSelectVisible = true;
    },
    
    onLoginBtnClick() {
      let currentService = this.currentService
      if(this.selectedUserId.length>0){
        this.$api.swaggerLogin(this.selectedUserId,currentService,{
          onSucess: response => {
            if(response.data.errcode == 0){
              this.$message({
                message: response.data.data,
                type: 'success'
              });
              this.loginSuccess = true;
              this.loginSuccessMsg = "用户" + this.selectedUser + "已登陆";
            }else{
              this.$message({
                message: response.data.errmsg,
                type: "error"
              });
            }
          }
        });
      }else{
        this.$message({
          message: this.$t('msg_select_user'),
          type: 'error'
        });
      }
      
    },
    onLogoutBtnClick() {
      let currentService = this.currentService
      this.$api.swaggerLogOut(currentService,{
        onSucess: response => {
          if(response.data.errcode == 0){
            this.$message({
              message: response.data.data,
              type: 'success'
            });
            this.loginSuccess = true;
            this.loginSuccessMsg = "用户" + this.selectedUser + "已注销";
            this.selectedUserId="";
            this.selectedUser="";
          }else{
            this.$message({
              message: response.data.errmsg,
              type: "error"
            });
          }
        }
      });
    },
    onExit(){
      window.close()
      // this.$emit("exit")
    },
  },
};
</script>
<style lang="scss" scoped>

</style>